<template>
  <div class="relative z-20">
    <n-config-provider :theme="theme">
      <Header @color="handleColor"></Header>
      <Main>
        <nuxtPage :page-key="(route) => route.fullPath"></nuxtPage>
      </Main>
      <!-- <div
        style="
          position: fixed;
          inset: 0px;
          overflow: hidden;
          width: 100vw;
          height: 100vh;
        "
      >
        <SplashCursor
          :SIM_RESOLUTION="128"
          :DYE_RESOLUTION="1440"
          :CAPTURE_RESOLUTION="512"
          :DENSITY_DISSIPATION="3.5"
          :VELOCITY_DISSIPATION="2"
          :PRESSURE="0.1"
          :PRESSURE_ITERATIONS="20"
          :CURL="3"
          :SPLAT_RADIUS="0.2"
          :SPLAT_FORCE="6000"
          :SHADING="true"
          :COLOR_UPDATE_SPEED="10"
          :BACK_COLOR="{ r: 0, g: 0, b: 0 }"
          :TRANSPARENT="true"
        />
      </div> -->
    </n-config-provider>
  </div>
</template>

<script setup>
import SplashCursor from "@/pages/LetterGlitch.vue";
// import { useMessage } from 'naive-ui'
const theme = ref(null);
const isDarkMode = ref(false); // 跟踪主题模式
const handleColor = (color) => {
  theme.value = color;
  // window.$message = useMessage()
  // 同步更新背景模式状态
  isDarkMode.value = newTheme === darkTheme;
};
</script>

<style scoped>
body{
  width: 100vw;
  height: 100vh;
  background-color: oklch(20.8% .042 265.755);
}
.relative {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
</style>